<template>
  <div>
    <ul class="img-list">
      <li class="img-item" v-for="(item, index) in imgData" :key="index">
        <div class="mask">
          <div class="mask-bgcolor"></div>
          <i-ep-delete class="mask-icon" @click="imgDelete(index)" />
        </div>
        <img
          :src="`https://lsx.tianjinmaichong.com/api/${item}`"
          width="148"
          height="148"
        />
        <div class="img-icon-card"></div>
        <el-icon class="img-icon" size="10" color="#fff">
          <Select />
        </el-icon>
      </li>
    </ul>
    <div class="upload-card" v-if="isUpload">
      <div
        class="upload-box"
        onclick="document.getElementById('fileInput').click();"
      >
        <i-ep-plus />
      </div>
      <input
        ref="inputRef"
        id="fileInput"
        name="file"
        multiple
        accept="image/*"
        type="file"
        style="opacity: 0; width: 0"
        @change="handleChange"
        @click.stop
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import Compressor from "compressorjs";
import lawyerAPI from "@/api/lawyer";

const emit = defineEmits(["updateUploaded"]);
const props = defineProps({
  /**
   * 文件路径集合
   */
  list: {
    type: Array<string>,
    default: () => [],
  },
});
const imgData = ref<any>([]);
/** 是否能上传图片的状态 */
const isUpload = ref(true);
const inputRef = shallowRef<HTMLInputElement>();

watch(
  () => props.list,
  (newVal: string[]) => {
    // console.log(newVal, "newVal");
    if (newVal.length <= 0) {
      imgData.value = [];
      return;
    }
    imgData.value = newVal;
    if (newVal.length >= 1) {
      isUpload.value = false;
    } else {
      isUpload.value = true;
    }
  },
  { immediate: true }
);

/** 上传图片并显示 */
const handleChange = (e: Event) => {
  const files = (e.target as HTMLInputElement).files;
  if (!files) return;
  // 创建一个新的 Compressor 实例
  var newCompressor = new Compressor(files[0], {
    quality: 0.2, // 设置压缩质量，0 到 1 之间
    success: function (result) {
      // 压缩成功后的回调，result 是一个 Blob 对象，表示压缩后的图片
      var compressedFile = result;
      var formData = new FormData();
      formData.append("file", compressedFile);
      lawyerAPI
        .uploadAvatar(formData)
        .then((data) => {
          imgData.value.push(data);
          emit("updateUploaded", imgData.value);
          uploadShow();
        })
        .catch((error) => {
          ElMessage.error(`${error}或上传图片大小不能超过5M`);
        });
    },
    error: function (err) {
      console.error("Error compressing file:", err.message);
    },
  });
};
const uploadShow = () => {
  if (imgData.value.length >= 1) {
    isUpload.value = false;
  } else {
    isUpload.value = true;
  }
};
/** 删除图片 */
const imgDelete = (index: number) => {
  imgData.value.splice(index, 1);
  emit("updateUploaded", imgData.value);
  uploadShow();
};
</script>
<style scoped lang="scss">
.upload-card {
  background-color: #fafafa;
  border: 1px dashed #cdd0d6;
  border-radius: 6px;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.upload-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.img-item {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  width: 148px;
  height: 148px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}
.img-icon-card {
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-top: 30px solid #67c23a;
  border-left: 30px solid transparent;
  border-right: 0px solid #67c23a;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-icon {
  position: absolute;
  right: 5px;
  top: 4px;
  z-index: 9;
}
.img-item:hover .mask {
  display: block;
}
.mask {
  transition: opacity 0.5s ease;
  width: 100%;
  height: 100%;
  display: none;
}
.mask-bgcolor {
  width: 100%;
  height: 100%;
  background: rgba($color: #a3a3a3, $alpha: 0.1);
}
.mask-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
</style>
